<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmchart.debug.js" id="jmgraph" ></script>-->

		<style>
		html,body {
			margin:0;
			padding:10px;
			width:100%;
			height:100%;
		}
		#mycanvas canvas, #mycanvas div{
			background-color:#fff;
			margin:0 auto;		
		}
		/*div.jm-tooltip {
			background-color: rgba(255,255,255,0.8);
			padding:4px;
			border:1px solid #000;
			box-shadow: 0 0 3px #000;
			border-radius: 6px;
		}*/
		</style>
		<script type="module">
			//window.devicePixelRatio = 1;
			import { jmChart } from '../../dist/jmchart.esm.js';

			(function load() {
				var w = Math.max((window.innerWidth || window.document.body.clientWidth) * 0.9, 600);
				var h = Math.max((window.innerHeight || window.document.body.clientHeight) * 0.6, 200);			
				inichart(w,h);
			})();
			

			function inichart(w, h) {
					var chart = new jmChart('mycanvas', {
						width: w,
						height: h,
						xField: 'x',
						//baseY: 0,
						// 最大和最小X值，  这里一般不用指定，除非硬是需要
						//minXValue : 0,
						//maxXValue : 10,
						//minYValue: -100,
						//maxYValue: 400,
						enableAnimate: true,
						autoRefresh: true,
						yLabelFormat: function (value, shape) {
							if(this.index == 1) return value.toFixed(2) + '%';
							if(this.index == 2) return value;
						},
						xLabelFormat: function (value, data, index) {
							if(index % 5 === 0) return value + 'x';
							return '';
						},
						style: {
							margin: {
                                left: 100,
                                right: 100
							},
							markLine: {
								longtap: false, //  长按才出现标线
								lock: {
									y: 10,
									x: 10
								}
							},
							//layout: 'inside'
						},
						xAxisOption: {
							arrowVisible: true
						},
						yAxisOption: {
							arrowVisible: false
						}
					});
					chart.legend.legendPosition = 'top';
					chart.legend.visible = true;

					// touch改变数据点事件
					chart.on('touchPointChange', function(args) {
						console.log(args);
					});
					// 滑动标线，阻止默认事件
					chart.on('marklinemove', (args)=>{
						//args.event.preventDefault();// 阻止默认行为		
						//args.event.stopPropagation();	
					});

					var line1 = chart.createSeries('line', {
						field: 'y1',
						//index: 2, // 指定Y轴索引，如是档指定就会共用左边的Y轴，
						// 最大值和最小值，如果不指定会自动计算，
						// 如果指定了也只是指定了最大或最小边界，如果有数值超过它，依然以事实数值为准
						minYValue: 0,
						//maxYValue: 200 ,
						style: {
							// 画圆滑的曲线 
							curve: true,// 填充图形
							showItem: true,
                            area: {
                                // 自定义填充颜色处理
                                fill: function(style) {
                                    // 根据颜色生成渐变效果
                                    const color = this.graph.utils.hexToRGBA(this.style.stroke);
                                    return `linear-gradient(50% 0 50% 100%, 
                                        rgba(${color.r},${color.g},${color.b}, 0) 1, 
                                        rgba(${color.r},${color.g},${color.b}, 0) 0.8,
                                        rgba(${color.r},${color.g},${color.b}, 0.3) 0.5,
                                        rgba(${color.r},${color.g},${color.b}, 0.5) 0.2, 
                                        rgba(${color.r},${color.g},${color.b}, 0.8) 0)`;
                                }
                            }
						},
						legendFormat: function(options) {
							return '图例2';
						},
						// 生成点的回调
						onPointCreated(point) {
							//console.log('onPointCreated', point);
							if(point.data.x === 10) {
								addPointMarkLabel(point, this, {
                                    index: 0,
                                    text: '买入',
                                    style: {
                                        fill: '#55cccccc',
                                        stroke: 'blue'
                                    },
                                    labelStyle: {
                                        fill: 'blue'
                                    }
                                });
								addPointMarkLabel(point, this, {
                                    index: 1,
                                    text: '卖出',
                                    style: {
                                        fill: '#22cccccc',
                                        stroke: 'red'
                                    },
                                    labelStyle: {
                                        fill: 'green'
                                    }
                                });
                            }
						}
					});		
					
					var line2 = chart.createSeries('line', {
						field: 'y2',
                        legendLabel: '图例3',
                        index: 2,
						style: {
							showItem: false,
							// 画圆滑的曲线 
							curve: true,// 填充图形
							area: {
								// 自定义填充颜色处理
								fill: function(style) {
									// 根据颜色生成渐变效果
									const color = this.graph.utils.hexToRGBA(this.style.stroke);
									return `linear-gradient(50% 0 50% 100%, 
										rgba(${color.r},${color.g},${color.b}, 0) 1, 
										rgba(${color.r},${color.g},${color.b}, 0) 0.8,
										rgba(${color.r},${color.g},${color.b}, 0.3) 0.5,
										rgba(${color.r},${color.g},${color.b}, 0.5) 0.2, 
										rgba(${color.r},${color.g},${color.b}, 0.8) 0)`;
								}
							}
						},
						// 生成点的回调
						onPointCreated(point) {
							//console.log('onPointCreated', point);							
                            if(point.index % 7 === 0) {
                                addPointMark(point, this, {
                                    style: {
                                        fill: this.style.stroke,
                                        stroke: '#ffffff',
										lineWidth: 3,
                                    }
                                });
                            }
							else if(point.index % 5 === 0) {
                                addPointMark(point, this, {
                                    style: {
                                        fill: '#ffffff',
                                        stroke: 'green',
										lineWidth: 2,
                                    }
                                });
                            }
						}
					});	

                    
		
					const datacount = 20;
					function animate() {
						if(true) {
							chart.data = [];
							for(var i = 0;i<datacount;i++) {
								var data = {
									x : i,
									y1: Math.random() * 5 + i,
									y2: Math.random() * 10 + i * 5,
								};
								if(i == 3) {
									data.y = null;
								}
								chart.data.push(data);
							}
						}
						else {
							for(var i=datacount-1;i>0;i--) {
								var x = chart.data[i].x;
								chart.data[i] = chart.utils.clone(chart.data[i - 1]);
								chart.data[i].x = x;
							}
							
								chart.source[0] = {
									x : chart.data[0].x,
									y : Math.random() * 200 - 100
								};
								
						}
						
						//setTimeout(animate,500);
						chart.refresh();
						console.log(chart.data);
					}
					
					animate();
					chart.utils.bindEvent(document.getElementById('btnRedraw'),'click',animate);
					
				}
            
            function addPointMark(point, serie, options) {
                const mark = serie.graph.createShape('circle', {
                    radius: 6,
                    style: {
                        fill: 'red',
                        zIndex: 18,
                        ...options.style
                    },
                    center: point
                });
                serie.addShape(mark);
            }
				// 创建点的标注
			function addPointMarkLabel(point, serie, options = {index:0}) {
				const w = 40;
				const h = 20;
                const arrowOffset = 10;
                
                const bottom = 20 + (h + arrowOffset) * options.index;

				// 标注图形左上角
				const p1 = {
							x: point.x - w / 2,
							y: point.y - bottom - h
						};
				const p2 = {
							x: p1.x,
							y: p1.y + h
						};
				const p3 = {
							x: p2.x + w,
							y: p2.y
						};
				const p4 = {
							x: p3.x,
							y: p1.y
						};
				
				const labelPath = serie.graph.createShape('path', {
					style: {
						stroke: 'red',
						fill: '#55cccccc',
						zIndex: 20,
                        close: true,
                        ...options.style
					},
					points: [
						p1,
						p2,
						{
							x: point.x - arrowOffset / 2,
							y: p2.y
						},
						{
							x: point.x,
							y: p2.y + arrowOffset
						},
						{
							x: point.x + arrowOffset / 2,
							y: p2.y
						},
						p3,
						p4
					]
				});
				const label = serie.graph.createShape('label', {
					style: {
						textAlign: 'center',
						textBaseline: 'middle',
						...options.labelStyle
					},
					center: {
						x: w / 2,
						y: h / 2 + 2
					},
					text: options.text
                });
                
				labelPath.children.add(label);
				serie.addShape(labelPath);
			}
		</script>
	</head>
	<body>
		<div id="mycanvas">
			</div>	
			<button id="btnRedraw">重绘</button>		
	</body>
</html>